<html>
  <script src='../../src/js/print.js'></script>
  <script type="text/javascript">
    function printPdf() {
      printJS('/test/manual/test.pdf');
    }

    function printPdfWithModal() {
        printJS({
            printable: '/test/manual/test.pdf',
            type: 'pdf',
            showModal: true
        });
    }
    
    function printPdfWithModalAndCloseCallback() {
        printJS({
            printable: '/test/manual/test.pdf',
            type: 'pdf',
            showModal: true,
            onPrintDialogClose: () => console.log('The print dialog was closed'),
            onPdfOpen: () => console.log('Pdf was opened in a new tab due to an incompatible browser')
        });
    }

    function printHtml() {
      printJS({
        printable: 'test',
        type: 'html'
      });
    }

    function printHtmlCustomStyle() {
      const style = '@page { margin: 0 } @media print { h1 { color: blue } }'

      printJS({
        printable: 'test',
        type: 'html',
        style: style,
        scanStyles: false
      });
    }

    function printHtmlCss() {
        printJS({
            printable: 'test',
            type: 'html',
            css: 'test.css',
            scanStyles: false
        });
    }

    function printJson() {
      let data = [];
      for (let i=0; i <= 1000; i++){
        data.push({
          test1: createRandomString(),
          test2: createRandomString()
        });
      }

      printJS(
        {
          printable: data,
          properties: [{
            field: 'test1',
            displayName: 'test 1',
            columnSize: 1
          },{
            field: 'test2',
            displayName: 'test 2',
            columnSize: 4
          }],
          type: 'json'
        })
    }

    function printStyledJson() {
        let data = [
            {
                test1: 'Test1 string',
                test2: 'Test2 string'
            },
            {
                test1: 'more Test1 string',
                test2: 'more Test2 string'
            }
        ]

        printJS({printable: data, properties: ['test1', 'test2'], type: 'json', gridStyle: 'border: 2px solid #3971A5;', gridHeaderStyle: 'color: red;  border: 2px solid #3971A5;'})
    }

    function printNestedJson() {
      let data = [];
      for (let i=0; i <= 100; i++){
        data.push({
          test1: createRandomString(),
          test2: {
            a: createRandomString()
          }
        });
      }

      printJS(
        {
          printable: data,
          properties: [{
            field: 'test1',
            displayName: 'test 1',
            columnSize: 1
          },{
            field: 'test2.a',
            displayName: 'test 2 - a',
            columnSize: 4
          }],
          type: 'json'
        })
    }

    function createRandomString() {
      var text = "";
      var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";

      for (var i = 0; i < 5; i++)
        text += possible.charAt(Math.floor(Math.random() * possible.length));

      return text;
    }
  </script>
  <body>
    <section id="test" class="test">
      <h1>Print.js Test Page</h1>
      <p>
        <button onClick='printPdf();'>
          Print PDF
        </button>
        <button onClick='printPdfWithModal();'>
          Print PDF with Loading Modal
        </button>
        <button onClick='printPdfWithModalAndCloseCallback();'>
          Print PDF with Loading Modal and close callback
        </button>
      </p>
      <p>
        <button onClick='printHtml();'>
          Print HTML
        </button>
        <button onClick='printHtmlCustomStyle();'>
          Print HTML with custom style
        </button>
        <button onClick='printHtmlCss();'>
          Print HTML with custom css
        </button>
      </p>
      <p>
        <button onClick='printJson();'>
          Print JSON
        </button>
        <button onClick='printStyledJson();'>
          Print Styled JSON
        </button>
        <button onClick='printNestedJson();'>
          Print Nested JSON
        </button>
      </p>
    </section>
  </body>
</html>